<template>
  <div
    style="display:flex;position: sticky;
    top: 0;
    z-index: 999;box-shadow: -3px -3.5px 12px rgba(102,102,102,.5);"
    v-if="isalive"
  >
    <span class="logo_title">
      <img src="/images/jbelogo2.png" height="40"/>
    </span>
    <el-menu
      style="flex:1;height:60px;overflow:hidden"
      :defaultActive="path"
      router
      class="el-menu-demo"
      mode="horizontal"
      backgroundColor="#fff"
      textColor="#aaa"
      activeTextColor="#26a2ff"
    >
      <el-menu-item v-for="item in sideMenu" :key="item.id" :index="item.hash.load_page">
        {{item.hash.funcname}}
        <el-badge :value="alarmArr.length" :max="10" style="margin-left:2px;float:right" v-if="item.hash.funcname=='消息提醒'"></el-badge>
      </el-menu-item>
      <span class="demonstration">
        欢迎您，
        <b style="color:#26a2ff">{{username}}</b>&nbsp;&nbsp;丨&nbsp;&nbsp;
        <b class="mm" @click="showmm=true">修改密码</b>&nbsp;&nbsp;丨&nbsp;&nbsp;
        <span @click="userQuit" class="quit">退出</span>
      </span>
    </el-menu>

    <el-dialog title="修改密码" :visible.sync="showmm" width="40%" :modal="false">
      <el-form labelWidth="140px" :rules="rules" :model="form1" ref="form1">
        <el-form-item label="旧密码" prop="pw1">
          <el-input v-model="form1.pw1"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pw2">
          <el-input v-model="form1.pw2" clearable type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pw3">
          <el-input v-model="form1.pw3" clearable type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showmm = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="savemm(form1)">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.form1.pw3 !== '') {
          this.$refs.form1.validateField('pw3');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.form1.pw2) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      alarmArr: [],
      isalive: true,
      form1: {
        pw1: '',
        pw2: '',
        pw3: '',
      },
      rules: {
        pw1: [
          {
            required: true, // 是否必填
            message: '不能为空', // 规则
            trigger: 'blur', // 何事件触发
          },
        ],
        pw2: [{ validator: validatePass, trigger: 'blur', required: true }],
        pw3: [{ validator: validatePass2, trigger: 'blur', required: true }],
      },
      showmm: false,
      sideMenu: [],
      ts: this.newStore(),
      username: localStorage.getItem('username'),
    };
  },
  created() {
    console.log(this.$route.path);
    this.getSidemenu();
    this.getalarmArr();
    // if (localStorage.getItem('token') != null && localStorage.getItem('token') != '') { this.getSidemenu(); }
    this.username = localStorage.getItem('username');
  },

  methods: {
    getalarmArr() {
      const req = {
        handle:
          '0D11340FE194B51D624F3AFA15C59A27BE8D98FED80D7D61F6486B1D96ED9F7E',
        start: 0,
        limit: 100000,
        isread: '0',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.alarmArr = ts.d.data.operation1;
      });
    },
    savemm() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          const req = {
            handle:
              'E299744D88ADCDF5A77F3C564BE5A0586B7ADB91A3DFE0FAA687B580C0B7FD7F',
            oldpwd: this.form1.pw1,
            newpwd1: this.form1.pw2,
          };
          this.$confirm('确定修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.spost(this.ts, '/mainservlet', req).then(() => {
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                });
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                localStorage.removeItem('pid');
                this.$message({
                  type: 'success',
                  message: '请重新登陆',
                });
                this.$router.push('/');
                this.showmm = false;
              });
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消',
              });
            });
        } else {
          this.$message.error('密码不一致！');
          return false;
        }
      });
    },
    // gohome() {
    //   if (localStorage.getItem('belongunit') != '2') {
    //     this.$router.push('/glmanager');
    //   } else {
    //     this.$router.push('/qzjx/jxdf');
    //   }
    // },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        supid: '1',
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },
    userQuit() {
      this.$confirm('确认退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          localStorage.removeItem('token');
          localStorage.removeItem('username');
          this.$message({
            type: 'success',
            message: '已退出',
          });
          this.$router.push('/');
          // this.$router.push('houseManage');
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
  },
  computed: {
    path() {
      return `/${this.$route.path.split('/')[1]}`;
    },
  },
};
</script>

<style lang="stylus" scoped>
.el-menu-item:hover {
  background-color: #fff !important;
  border-bottom: 2px solid #fff;
}

.mm {
  &:hover {
    text-decoration: underline;
  }
}

.el-menu--horizontal {
  border-bottom: 0;
}

.demonstration:focus {
  background: #fff;
}

.demonstration {
  height: 60px;
  line-height: 60px;
  float: right;
  padding-right: 4%;
  cursor: pointer;
  outline: none;
}

.logo_title {
  height: 60px;
  width: 200px;
  float: left;
  line-height: 60px;
  font-size: 18px;
  color: #444444;
  cursor: pointer;
  background: #fff;
  text-align: center;

  i {
    font-size: 30px;
    color: #f4ea0c;
    display: inline-block;
    width: 40%;
    text-align: center;
    height: 100%;
    float: left;
  }
}
</style>

